<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 10px;
      }
      .container {
        width: 100px;
        height: 2000px;
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <div class="box"></div>
    <script>
      //事件对象: 任意一个事件,在触发的时候 内置一个对象 描述事件的一些相关信息

      document.querySelector(".box").onclick = function (e) {
        //接受的形参 e 就是事件对象,里面包含事件有关的一些信息;
        // console.log("点击了", e);
        //事件对象有兼容性问题
        //主流浏览器: e形参获取事件对象
        //ie8及以下 获取事件对象 是通过 window.event
        var event = e || window.event;
        console.log(event);
        console.log(event.clientY);
        console.log(event.clientX);
        console.log(event.offsetY);
        console.log(event.offsetX);
        console.log(event.pageY);
        console.log(event.target);
      };

      /*
      事件对象里的参数:
      altKey: 事件触发的时候是否  按下了alt键
      ctrlKey: 是否按下了ctrl
      shiftKey: 是否按下了shift
      button: 0 左键 1 滚轮 2 右键

      clientX: 事件触发 鼠标距离浏览器(视口)左边的偏移量
      clientY: 事件触发的时候 鼠标距离浏览器上边的偏移量

      offsetX: 事件触发的时候 鼠标相对于事件源的左边偏移量
      offsetY: 事件触发的时候 鼠标相对于事件源上边的偏移量

      pageX: 事件触发的时候 鼠标相对于页面的 左边偏移量
      pageY: 事件触发的时候鼠标相对于页面的上面偏移量

      target: 事件触发的元素目标

      type:  事件类型
      */

      /* 
      总结:
      一.width.height.left.top 和元素有关  元素的属性
      1.clientWidth  clientHeight:自身 + padding
      2.offsetWidth  offsetHeight:自身 + padding + border
      3.offsetLeft  offsetTop:
            一.没有定位,就是相对浏览器的左边和上边的偏移量
            二.有定位,就是相对于父元素的左边和上边的偏移量
      4.clientLeft clientTop: 左边和上边的边框宽度


      二. x,y和鼠标有关  鼠标的坐标
      1.clientX clientY 鼠标相对于浏览器的左边和上边的偏移量
      2.offsetX offsetY 鼠标相对于事件源左边和上边的距离
      3.pageX pageY 鼠标相对于页面的左边和上边的偏移量
      */
    </script>
  </body>
</html>
